<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
<p>这是p</p>
<button>这是button</button>
<script type="text/javascript">
	/*
		两种方法：
			1.----on***** 传统写法 on+事件类型 on click on mouseup
			特点：添加的事件具有唯一性，同一个元素同一个事件只能设置一个函数
			2.addEventListener(event,function,true)ie8以下版本不支持
			特点：同一个元素同一个事件类型可以绑定多个，并且按照顺序执行
				event:事件名 click mouseup mousedown 不加on
				function 触发事件后执行的方法
				布尔值:不必填
				 	默认 false 表示冒泡阶段处理函数
				 	true 捕获阶段获取函数
	
	*/
	let p = document.querySelector('p')
/*	p.onclick = function() {
		console.log('第一个')
	}
	p.onclick = function() {
		console.log('第二个')
	}*/
	function fn(){
		console.log('第二个addEventListener') 	
	}
	p.addEventListener('click',function() {
		console.log('第一个addEventListener')
	})
	p.addEventListener('click',fn,true)


	//解绑事件
	let btn = document.querySelector('button')
	btn.addEventListener('click',function() {
		//只能移出命名函数，匿名函数不能移出
		p.removeEventListener('click',fn,true)
	})
</script>
</body>
</html>